<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { actionList } from './const';
import useStore from '@/store'
import { register } from '@/api/user';

const { user } = useStore()

const emits = defineEmits(['changeType'])
const passwordBaseCheck = (_rule: any, value: string) => {
  if (!/^(?![a-z]+$)(?![A-Z]+$)/.test(value)) {
    return Promise.reject('必须包含小写字母，大写字母')
  } if (/^[\s]+/.test(value)) {
    return Promise.reject('不能以空格开头')
  } if (/[\<\>\'\)\+\/\*]/.test(value)) {
    return Promise.reject('不能包含<>\')+/ *')
  } if (value.length < 8) {
    return Promise.reject('密码长度不能小于8位')
  }
  return Promise.resolve();
}
const confirmPasswordCheck = (_rule: any, value: string) => {
  if (value != form.password) {
    return Promise.reject('两次密码不一致');
  }
  return Promise.resolve()
}
const loading = ref(false);
const formRef = ref();
const form = reactive({
  name: '',
  mobile: '',
  email: '',
  password: '',
  confirmPassword: '',
  sex: 0
})
const formRules = {
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  mobile: [{ required: true, message: '必填', trigger: 'blur' }],
  password: [
    { required: true, message: '必填', trigger: 'blur' },
    { validator: passwordBaseCheck, trigger: 'change' },
  ],
  confirmPassword: [
    { required: true, message: '必填', trigger: 'blur' },
    { validator: passwordBaseCheck, trigger: 'change' },
    { validator: confirmPasswordCheck, trigger: 'change' },
  ],
}

const formActions = {
  register() {
    formRef.value.validate((v: boolean) => {
      if (v) {
        loading.value = true
        register({
          userName: form.name,
          mobile: form.mobile,
          mail: form.email,
          password: form.confirmPassword,
          sex: form.sex,
        }).then((res: any) => {
          ElMessage.success(res.msg);
          formRef.value.resetFields();
        }).catch(err => {
          ElMessage.error(err.msg);
        }).finally(() => {
          loading.value = false
        })
      }
    })
  },
  backToLogin() {
    emits('changeType', actionList.LOGIN)
  }
}
</script>

<template>
<el-form
ref="formRef"
class="registerForm"
:model="form"
:rules="formRules"
>
  <div class="enter-x register-title">系统注册</div>
  <el-form-item prop="name" class="enter-x">
    <el-input v-model="form.name" placeholder="姓名"></el-input>
  </el-form-item>
  <el-form-item prop="mobile" class="enter-x">
    <el-input v-model="form.mobile" placeholder="手机号"></el-input>
  </el-form-item>
  <el-form-item prop="email" class="enter-x">
    <el-input v-model="form.email" placeholder="邮箱"></el-input>
  </el-form-item>
  <el-form-item prop="password" class="enter-x">
    <el-input
    v-model="form.password"
    placeholder="密码"
    type="password"
    show-password
    ></el-input>
  </el-form-item>
  <el-form-item prop="confirmPassword" class="enter-x">
    <el-input
    v-model="form.confirmPassword"
    placeholder="确认密码"
    type="password"
    show-password
    ></el-input>
  </el-form-item>
  <el-form-item prop="sex" class="enter-x">
    <el-radio-group v-model="form.sex">
      <el-radio :value="1">男</el-radio>
      <el-radio :value="0">女</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item class="enter-x">
    <el-button
    type="primary"
    class="btn"
    :loading="loading"
    @click="formActions.register"
    >
      确定
    </el-button>
    <el-button class="btn back-btn" @click="formActions.backToLogin">返回</el-button>
  </el-form-item>
</el-form>
</template>

<style lang="scss">
.registerForm {
  overflow: hidden;
  .register-title {
    font-size: 26px!important;
    color: #333;
    margin: 0px auto 33px auto;
    font-weight: bold;
  }
  .btn {
    width: 100%;
    &.back-btn {
      margin: 10px 0 0;
    }
  }
}
</style>